﻿<!doctype html>
<html class="no-js" lang="en-us">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Mayabi - Multipurpose Portfolio/Business HTML5 Template</title>
    <meta name="keywords" content="Corporate Business Shopse HTML5 Css3 Template" />
    <meta name="description" content="mayabi | Minimal Multipurpose HTML5 Template" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <!-- css here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/linebar.min.css">
    <link rel="stylesheet" href="assets/css/scrolltop.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/slick-theme.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
</head>

<body>
    <!--[if lte ie 9]>
            <p class="browserupgrade">you are using an <strong>outdated</strong> browser. please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

    <!-- Preloader -->
    <div class="mayabi-loader">
        <div class="preloader">
            <div class="item item-1"></div>
            <div class="item item-2"></div>
            <div class="item item-3"></div>
            <div class="item item-4"></div>
        </div>
    </div>
    <!-- header area start -->
    <div class="header-area">
        <div class="container">
            <div class="row">
                <!-- logo start -->
                <div class="col-md-3">
                    <div class="header-logo">
                        <a href="index.html"><img src="assets/img/logo.png" alt="logo" class="img-fluid" /></a>
                    </div>
                </div>
                <div class="responsive-menu-wrap"></div>
                <!-- nav start -->
                <div class="col-md-9">
                    <div class="mainmenu">
                        <ul id="navigation">
                            <li><a href="index.html">home</a></li>
                            <li><a href="about-1.html">about us</a></li>
                            <li><a href="#">portfolio <i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li><a href="folio-full-width.html"><i class="fa fa-angle-right"></i> portfolio full width</a></li>
                                    <li><a href="folio-2-col.html"><i class="fa fa-angle-right"></i> portfolio 2 column</a></li>
                                    <li><a href="folio-3-col.html"><i class="fa fa-angle-right"></i> portfolio 3 column</a></li>
                                    <li><a href="folio-4-col.html"><i class="fa fa-angle-right"></i> portfolio 4 column</a></li>
                                    <li><a href="#"><i class="fa fa-angle-right"></i> portfolio masonry </a>
                                        <ul>
                                            <li><a href="folio-masonry-1.html"> portfolio masonry 1</a></li>
                                            <li><a href="folio-masonry-2.html"> portfolio masonry 2</a></li>
                                            <li><a href="folio-masonry-3.html"> portfolio masonry 3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">blog <i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li>
                                        <a href="blog-2-col.html"><i class="fa fa-angle-right"></i> blog 2 column</a>
                                    </li>
                                    <li>
                                        <a href="blog-3-col.html"><i class="fa fa-angle-right"></i> blog 3 column</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-angle-right"></i> blog left sidebar</a>
                                        <ul>
                                            <li><a href="blog-2-col-left.html">2 column left sidebar</a></li>
                                            <li><a href="blog-1-col-left.html">1 column left sidebar</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-angle-right"></i> blog right sidebar</a>
                                        <ul>
                                            <li><a href="blog-2-col-right.html">2 column right sidebar</a></li>
                                            <li><a href="blog-1-col-right.html">1 column right sidebar</a></li>
                                        </ul>

                                    </li>
                                    <li>
                                        <a href="blog-no-sidebar.html"><i class="fa fa-angle-right"></i> blog no sidebar</a>
                                    </li>
                                    <li>
                                        <a href="blog-details.html"><i class="fa fa-angle-right"></i> blog details</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fa fa-angle-right"></i>blog details sidebar</a>
                                        <ul>
                                            <li><a href="blog-details-left-sidebar.html">details left sidebar</a></li>
                                            <li><a href="blog-details-right-sidebar.html">details right sidebar</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="current-item"><a href="#">shop <i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li><a href="shop-3-col.html"><i class="fa fa-angle-right"></i> shop 3 column</a></li>
                                    <li><a href="shop-4-col.html"><i class="fa fa-angle-right"></i> shop 4 column</a></li>
                                    <li><a href="shop-2col-left-sidebar.html"><i class="fa fa-angle-right"></i>shop 2 col left sidebar</a></li>
                                    <li><a href="shop-2col-right-sidebar.html"><i class="fa fa-angle-right"></i>shop 2 col right sidebar</a></li>
                                    <li><a href="shop-3col-left-sidebar.html"><i class="fa fa-angle-right"></i>shop 3 col left sidebar</a></li>
                                    <li><a href="shop-3col-right-sidebar.html"><i class="fa fa-angle-right"></i>shop 3 col right sidebar</a></li>
                                    <li><a href="product-details.html"><i class="fa fa-angle-right"></i>product details</a></li>
                                    <li><a href="cart.html"><i class="fa fa-angle-right"></i>cart</a></li>
                                    <li><a href="login.html"><i class="fa fa-angle-right"></i>login</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">contact us</a></li>
                        </ul>
                    </div>

                    <div class="header-search-bar">
                        <form action="index.html">
                            <input type="search" placeholder="keywords ...">
                        </form>
                    </div>
                </div>
                <!-- nav end -->
            </div>
        </div>
    </div>
    <!-- header area end -->
    <!-- breadcroumb area start -->
    <div class="mayabi-breadcroumb blue-bg text-center sec-p-100">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>product details</h2>
                    <h4><a href="index.html">home </a>/ product details</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcroumb area end -->
    <!-- single product area start -->
    <div class="single-product-detail-area mt-100">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="single-product-all-img">
                        <div class="product-big-img mb-10">
                            <img src="assets/img/product/single-product-1.jpg" alt="" class="img-fluid" />
                            <img src="assets/img/product/single-product-2.jpg" alt="" class="img-fluid" />
                            <img src="assets/img/product/single-product-3.jpg" alt="" class="img-fluid" />
                            <img src="assets/img/product/single-product-4.jpg" alt="" class="img-fluid" />
                        </div>
                        <div class="product-big-img-thumb">
                            <img src="assets/img/product/product-thumb-1.jpg" alt="" class="img-fluid" />
                            <img src="assets/img/product/product-thumb-2.jpg" alt="" class="img-fluid" />
                            <img src="assets/img/product/product-thumb-3.jpg" alt="" class="img-fluid" />
                            <img src="assets/img/product/product-thumb-4.jpg" alt="" class="img-fluid" />
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="single-product-brief mt-30">
                        <h2>white orange shoes</h2>
                        <div class="product-price">
                            <del>$88</del> $70.89
                        </div>
                        <div class="product-rating mb-20">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-half-o"></i>
                        </div>
                        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed
                            to using 'Content hereIt is a long established fact that a will be distracted by the readable content of a page when</p>

                        <div class="pro-quantity mt-25 mb-25">
                            <select style="display: none;">
                            <option value="01">01</option>
                            <option value="01">02</option>
                            <option value="01">03</option>
                            <option value="01">04</option>
                        </select>
                            <div class="nice-select" tabindex="0"><span class="current">01</span>
                                <ul class="list">
                                    <li data-value="01" class="option selected focus">01</li>
                                    <li data-value="01" class="option">02</li>
                                    <li data-value="01" class="option">03</li>
                                    <li data-value="01" class="option">04</li>
                                </ul>
                            </div>
                        </div>
                        <button class="btn btn-type-3">Add To Cart</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- single product area end -->
    <!-- single product brief rivew start -->
    <div class="single-product-brief-rivew">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="post-heading">
                        <h3>recent comments</h3>
                    </div>
                    <div class="single-product-rivew-tab">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">description</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">reviews (1)</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
                                    opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
                                    will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the likeIt is a long established fact that a reader
                                    will be distracted by the readable content of a page when looking at its layout. The point of</p>

                            </div>
                            <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                                <div class="reviews-list">
                                    <div class="reviews-box">
                                        <div class="reviews-avatar">
                                            <img src="assets/img/product/comments1.png" alt="">
                                        </div>
                                        <div class="reviews-text">
                                            <div class="reviewer-name-date">
                                                <h5>david mors<span>Jan 08 2020</span></h5>

                                            </div>
                                            <div class="product-rating mb-10 mt-10">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <p>industry. Lorem Ipsum has been the industry's standard dummy text ever since t he 1500s, when an unknown printer took a galley of type and industry. Lorem Ipsum has been the industry's standard dummy text ever
                                                since t he 1500s, when an unknown printer took a galley of type and</p>
                                        </div>
                                    </div>
                                    <!-- reviews form -->
                                    <div class="post-reviews-form-area">
                                        <div class="post-heading">
                                            <h3>add a review</h3>
                                        </div>
                                        <form action="#" class="post-reviews-form">
                                            <div class="row">
                                                <div class="col-xl-12">
                                                    <textarea name="comments" class="form-control" cols="30" rows="10" placeholder="Your Comments"></textarea>
                                                </div>
                                                <div class="col-xl-6">
                                                    <input type="text" class="form-control" placeholder="Name">
                                                </div>
                                                <div class="col-xl-6">
                                                    <input type="email" class="form-control" placeholder="E-mail">
                                                </div>
                                                <div class="col-xl-12">
                                                    <button class="btn btn-type-3" type="submit">add your review</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- single product brief rivew end -->
    <!-- related product area start -->
    <div class="related-product-area mb-30">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="post-heading">
                        <h3>related products</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="single-product-wrap text-center">
                        <div class="product-img">
                            <a href="">
							<img src="assets/img/shop/product-1.jpg" alt="product" class="img-fluid" /></a>

                            <ul class="product-action">
                                <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-heart"></i></a></li>
                            </ul>
                            <div class="sale-tag">
                                <span class="new">new</span>
                            </div>
                        </div>
                        <div class="product-content">
                            <h4><a href="#" class="product-title">yellow smart watch</a></h4>
                            <div class="product-price">
                                <del>$88</del> $70.89
                            </div>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="single-product-wrap text-center">
                        <div class="product-img">
                            <a href="">
							<img src="assets/img/shop/product-2.jpg" alt="product" class="img-fluid" /></a>

                            <ul class="product-action">
                                <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-heart"></i></a></li>
                            </ul>
                            <div class="sale-tag">
                                <span class="new">sale</span>
                            </div>
                        </div>
                        <div class="product-content">
                            <h4><a href="#" class="product-title">green protecting musk</a></h4>
                            <div class="product-price">
                                $44.89
                            </div>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="single-product-wrap text-center">
                        <div class="product-img">
                            <a href=""><img src="assets/img/shop/product-3.jpg" alt="product" class="img-fluid" /></a>
                            <ul class="product-action">
                                <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-heart"></i></a></li>
                            </ul>
                        </div>
                        <div class="product-content">
                            <h4><a href="#" class="product-title">single leg shocks</a></h4>
                            <div class="product-price">
                                <del>$88</del> $70.89
                            </div>
                            <div class="product-rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- related product area end -->
    <!-- subscribe form area start -->
    <div class="subscribe-form sec-p-100 text-center blue-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mx-auto">
                    <h2>subscribe newsletter</h2>
                    <p>Enter your email and we'll send you details about new courses and events.</p>
                    <div class="subscribe-input">
                        <input class="form-control" type="email" placeholder="Enter your email" name="email">
                        <button type="submit" class="btn btn-type-4">subscribe</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- subscribe form area end -->
    <!-- footer area start -->
    <footer>
        <div class="footer-area sec-p-50">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="copy-right text-center">
                            <div class="footer-logo mb-30">
                                <a href="#"><img src="assets/img/logo.png" alt="logo" class="img-fluid" /></a>
                            </div>
                            copyright 2019 <a href="http://www.17sucai.com/">mayabi</a> | all rights reserved | designed by workertm
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer area end -->
    <!-- scrolltop button -->
    <div class="material-scrolltop"></div>

    <!-- js here -->
    <script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery-ui.js"></script>
    <script src="assets/js/slicknav.min.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/magnific-popup.min.js"></script>
    <script src="assets/js/linebar.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/counterup.min.js"></script>
    <script src="assets/js/nice-select.min.js"></script>
    <script src="assets/js/scrolltop.js"></script>
    <script src="assets/js/ajax-form.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>

</html>
